<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Documentation - Eclipse Free BIRD Tools</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="Eclipse Free BIRD Tools Documentation" />
	<meta name="keywords" content="Eclipse Free BIRD Tools, Documentation, API, Guide" />
	<meta name="author" content="Neil Mackenzie" />

	<!-- Facebook and Twitter integration -->
	<meta property="og:title" content="Documentation - Eclipse Free BIRD Tools"/>
	<meta property="og:image" content=""/>
	<meta property="og:url" content=""/>
	<meta property="og:site_name" content="Eclipse Free BIRD Tools"/>
	<meta property="og:description" content="Complete documentation for Eclipse Free BIRD Tools"/>
	<meta name="twitter:title" content="Documentation - Eclipse Free BIRD Tools" />
	<meta name="twitter:image" content="" />
	<meta name="twitter:url" content="" />
	<meta name="twitter:card" content="" />

	<link href="https://fonts.googleapis.com/css?family=Raleway:100,300,400,700" rel="stylesheet">

	<!-- Animate.css -->
	<link rel="stylesheet" href="css/animate.css">
	<!-- Icomoon Icon Fonts-->
	<link rel="stylesheet" href="css/icomoon.css">
	<!-- Themify Icons-->
	<link rel="stylesheet" href="css/themify-icons.css">
	<!-- Bootstrap  -->
	<link rel="stylesheet" href="css/bootstrap.css">
	<!-- Magnific Popup -->
	<link rel="stylesheet" href="css/magnific-popup.css">
	<!-- Owl Carousel  -->
	<link rel="stylesheet" href="css/owl.carousel.min.css">
	<link rel="stylesheet" href="css/owl.theme.default.min.css">
	<!-- Theme style  -->
	<link rel="stylesheet" href="css/style.css">

	<!-- Modernizr JS -->
	<script src="js/modernizr-2.6.2.min.js"></script>
	<!-- Page Allowlist Check -->
	<script src="js/allowlist.js"></script>
	<!-- FOR IE9 below -->
	<!--[if lt IE 9]>
	<script src="js/respond.min.js"></script>
	<![endif]-->

	<style>
		.doc-section {
			padding: 80px 0;
			border-bottom: 1px solid #eee;
		}
		.doc-section:last-child {
			border-bottom: none;
		}
		.doc-icon {
			width: 120px;
			height: 120px;
			margin: 0 auto 30px;
			background: #0077be;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 48px;
			color: white;
			transition: all 0.3s ease;
		}
		.doc-icon:hover {
			background: #008793;
			transform: translateY(-5px);
		}
		.doc-card {
			text-align: center;
			padding: 40px 20px;
			margin-bottom: 30px;
		}
		.doc-card h3 {
			margin: 20px 0;
			color: #333;
		}
		.doc-card p {
			color: #666;
			margin-bottom: 30px;
		}
		.feedback-form {
			background: white;
			padding: 50px;
			border-radius: 15px;
			box-shadow: 0 10px 30px rgba(0,0,0,0.1);
			border: 1px solid #e9ecef;
		}
		.form-group {
			margin-bottom: 25px;
		}
		.form-group label {
			font-weight: 600;
			color: #333;
			margin-bottom: 8px;
			display: block;
			font-size: 14px;
			text-transform: uppercase;
			letter-spacing: 0.5px;
		}
		.form-control {
			border-radius: 8px;
			border: 2px solid #e9ecef;
			padding: 15px 20px;
			font-size: 16px;
			width: 100%;
			background: #f8f9fa;
			transition: all 0.3s ease;
		}
		.form-control:focus {
			outline: none;
			border-color: #008793;
			background: white;
			box-shadow: 0 0 0 3px rgba(0, 135, 147, 0.1);
		}
		.btn-feedback {
			background: #008793;
			color: white;
			border: none;
			padding: 12px 30px;
			border-radius: 50px;
			font-weight: 500;
			text-transform: uppercase;
			letter-spacing: 1px;
			transition: all 0.3s ease;
			cursor: pointer;
			font-size: 14px;
			box-shadow: 0 4px 15px rgba(0, 135, 147, 0.4);
		}
		.btn-feedback:hover {
			transform: translateY(-2px);
			box-shadow: 0 6px 20px rgba(0, 135, 147, 0.5);
			color: white;
		}
		.user-guide-placeholder {
			background: #f8f9fa;
			padding: 30px;
			border-radius: 8px;
			margin: 20px 0;
			border-left: 4px solid #0077be;
		}
		.coming-soon {
			color: #999;
			font-style: italic;
		}
		.btn-codespace {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			background: #0077be;
			color: white;
			border: none;
			padding: 12px 20px;
			border-radius: 6px;
			font-weight: 500;
			text-decoration: none;
			transition: all 0.3s ease;
			font-size: 14px;
		}
		.btn-codespace:hover {
			background: #008793;
			color: white;
			text-decoration: none;
			transform: translateY(-1px);
		}
		.codespace-icon {
			fill: currentColor;
		}

		/* Dynamic User Guide Miniatures */
		.user-guides-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
			gap: 20px;
			margin: 20px 0;
		}

		.user-guide-miniature {
			background: white;
			border: 1px solid #e0e6ed;
			border-radius: 10px;
			padding: 20px;
			transition: all 0.3s ease;
			position: relative;
			cursor: pointer;
			text-decoration: none;
			display: block;
			overflow: hidden;
			box-shadow: 0 2px 4px rgba(0,0,0,0.05);
		}

		.user-guide-miniature:hover {
			transform: translateY(-3px);
			box-shadow: 0 8px 25px rgba(82, 211, 170, 0.15);
			border-color: #0077be;
			text-decoration: none;
		}

		.user-guide-miniature::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 4px;
			background: #0077be;
		}

		.miniature-header {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			margin-bottom: 15px;
		}

		.miniature-icon {
			flex-shrink: 0;
			width: 50px;
			height: 50px;
			background: #0077be;
			border-radius: 10px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 15px;
		}

		.miniature-icon i {
			font-size: 24px;
			color: white;
		}

		.miniature-title-area {
			flex-grow: 1;
			min-width: 0;
		}

		.miniature-title {
			font-size: 18px;
			font-weight: 600;
			color: #2c3e50;
			margin: 0 0 5px 0;
			line-height: 1.3;
		}

		.miniature-badge {
			background: #e8f5e8;
			color: #0077be;
			font-size: 11px;
			padding: 3px 8px;
			border-radius: 12px;
			font-weight: 500;
			text-transform: uppercase;
			letter-spacing: 0.5px;
		}

		.miniature-description {
			color: #666;
			font-size: 14px;
			line-height: 1.5;
			margin: 15px 0;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
			overflow: hidden;
		}

		.miniature-footer {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20px;
			padding-top: 15px;
			border-top: 1px solid #f0f0f0;
		}

		.miniature-meta {
			font-size: 12px;
			color: #999;
			display: flex;
			align-items: center;
		}

		.miniature-meta i {
			margin-right: 5px;
			color: #0077be;
		}

		.miniature-arrow {
			color: #0077be;
			font-size: 16px;
			transition: transform 0.3s ease;
		}

		.user-guide-miniature:hover .miniature-arrow {
			transform: translateX(3px);
		}

		/* Loading and Error States */
		.loading-guides, .error-guides, .empty-guides {
			padding: 40px 20px;
			text-align: center;
		}

		.loading-spinner i {
			animation: spin 1s linear infinite;
		}

		@keyframes spin {
			from { transform: rotate(0deg); }
			to { transform: rotate(360deg); }
		}

		/* Disabled Guide Styles */
		.user-guide-miniature.disabled {
			opacity: 0.6 !important;
			background: #f8f9fa !important;
			border: 2px dashed #dee2e6 !important;
			cursor: not-allowed !important;
			position: relative;
			pointer-events: none;
		}

		.user-guide-miniature.disabled:hover {
			transform: none !important;
			box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
			background: #f8f9fa !important;
			border: 2px dashed #dee2e6 !important;
		}

		.user-guide-miniature.disabled .miniature-icon {
			position: relative;
			background: #6c757d;
			color: #fff;
		}

		.user-guide-miniature.disabled .miniature-icon .overlay-icon {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 16px;
			color: #fff;
			z-index: 1;
		}

		.user-guide-miniature.disabled .miniature-icon i:not(.overlay-icon) {
			opacity: 0.3;
		}

		.user-guide-miniature.disabled .miniature-title {
			color: #6c757d;
		}

		.user-guide-miniature.disabled .miniature-description.disabled {
			color: #6c757d;
			font-style: italic;
		}

		.user-guide-miniature.disabled .miniature-footer.disabled {
			color: #6c757d;
		}

		.miniature-badge.coming-soon {
			background:#00a86b;
			color:white;
		}

		.miniature-badge.available {
			background: #008793
			color: white;
		}

		.user-guide-miniature.disabled .miniature-arrow i {
			color: #6c757d;
		}

		/* Responsive adjustments */
		@media (max-width: 768px) {
			.user-guides-grid {
				grid-template-columns: 1fr;
				gap: 15px;
			}

			.user-guide-miniature {
				padding: 15px;
			}

			.miniature-header {
				flex-direction: column;
				align-items: flex-start;
			}

			.miniature-icon {
				margin-right: 0;
				margin-bottom: 10px;
			}
		}

		@media (max-width: 480px) {
			.miniature-description {
				-webkit-line-clamp: 2;
			}
		}

		/* Installation methods responsive layout */
		.installation-methods .installation-column {
			margin-bottom: 30px;
			text-align: left;
		}

		.installation-methods .installation-column h4 {
			color: #333;
			margin-bottom: 15px;
			font-weight: 600;
			text-align: left;
		}

		.installation-methods .code-block {
			text-align: left;
		}

		/* Single column for mobile and thin resolutions */
		@media (max-width: 1199px) {
			.installation-methods .installation-column {
				width: 100%;
				float: none;
			}
		}

		/* Two columns for wider screens (1200px and above) */
		@media (min-width: 1200px) {
			.installation-methods .installation-column {
				width: 50%;
				float: left;
				padding-right: 15px;
			}

			.installation-methods .installation-column:last-child {
				padding-right: 0;
				padding-left: 15px;
			}
		}
	</style>
</head>
<body>

<div class="gtco-loader"></div>

<div id="page">

	<!-- Navigation Include -->
	<div w3-include-html="navbar.html"></div>

	<header class="hero-section">
		<div class="gtco-container">
			<div class="row">
				<div class="col-md-12 text-center">
					<h1>Documentation</h1>
					<h2>Your gateway to Eclipse Free BIRD Tools</h2>
				</div>
			</div>
		</div>
	</header>

	<!-- Dynamic Sidebar will be inserted here by JavaScript -->

	<!-- Main Content -->
	<div class="main">

		<!-- Quickstart Section -->
	<section class="doc-section" id="quickstart">
		<div class="gtco-container">
			<div class="row">
				<div class="col-md-12">
					<div class="doc-card">
						<div class="doc-icon">
							<i class="ti-bolt"></i>
						</div>
						<h3>Quickstart</h3>
						<p>Get up and running with Eclipse Free BIRD Tools in minutes using our simple installation scripts.</p>

						<div class="installation-methods" style="margin-top: 30px;">
							<div class="row">
								<div class="col-md-6 col-sm-12 installation-column">
									<h4>For Windows (and Servers):</h4>
									<div class="code-block">
										git clone https://github.com/eclipse-efbt/efbt.git
										<br>
										cd efbt
										<br>
										<code>windows_startup.bat</code>
									</div>
								</div>
								<div class="col-md-6 col-sm-12 installation-column">
									<h4>For Linux and macOS:</h4>
									<div class="code-block">
										git clone https://github.com/eclipse-efbt/efbt.git
										<br>
										cd efbt
										<br>
										chmod +x linux_startup.sh
										<br>
										<code>./linux_startup.sh</code>
									</div>
									<p style="margin-top: 15px; color: #666; font-size: 14px;">
										<strong>Note:</strong> The linux_startup.sh script works for both Linux based and macOS systems.
									</p>
								</div>
							</div>

							<div style="margin-top: 40px;">
								<h4 style="margin-bottom: 15px; text-align: center;">Or try instantly in your browser:</h4>
								<p style="margin-bottom: 20px; color: #666; font-size: 14px; text-align: center;">
									Requires a github account.
								</p>
								<div style="text-align: center;">
									<a href="https://github.com/codespaces/new?hide_repo_select=true&ref=master&repo=235610689"
									   target="_blank"
									   class="btn-codespace"
									   title="Open in GitHub Codespace">
										<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" class="codespace-icon">
											<path d="M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 0 1 0 1.5H8.5v4.25a.75.75 0 0 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2Z"></path>
										</svg>
										Open in GitHub Codespace
									</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>

	<!-- User Guides Section -->
	<section class="doc-section" id="user-guides">
		<div class="gtco-container">
			<div class="row">
				<div class="col-md-12">
					<div class="doc-card">
						<div class="doc-icon">
							<i class="ti-book"></i>
						</div>
						<h3>User Guides</h3>
						<p>Comprehensive guides and tutorials for mastering Eclipse Free BIRD Tools.</p>

						<!-- Dynamic User Guides Container -->
						<div id="dynamic-user-guides">
							<!-- Guides will be loaded dynamically here -->
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>


	</div>

	<!-- Footer Include -->
	<div w3-include-html="footer.html"></div>

</div>

<div class="gototop js-top">
	<a href="#" class="js-gotop"><i class="icon-arrow-up"></i></a>
</div>

<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="js/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- Waypoints -->
<script src="js/jquery.waypoints.min.js"></script>
<!-- Carousel -->
<script src="js/owl.carousel.min.js"></script>
<!-- Magnific Popup -->
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/magnific-popup-options.js"></script>
<!-- Main -->
<script src="js/main.js"></script>
<!-- W3 Include -->
<script src="js/w3-include.js"></script>
<!-- User Guides Dynamic Loader -->
<script src="js/user-guides.js"></script>


<!-- Dynamic Sidebar -->
<script src="js/dynamic-sidebar.js"></script>

</body>
</html>
